<!DOCTYPE html><head><meta charset="utf-8"><style>.container {
    width: 80%;
    margin: auto;
}

form {
    border:1px solid grey;
    padding:20px;
    width:50%;
}

img{
    max-width: 95%;
}

.center{
    display: table;
    margin: auto;
}

input {
    margin-bottom: 10px;
    width: 300px;
}

.col-lg-1 {
    width: 10%;
    float: left;
}
.col-lg-6{
    width:50%;
    float:left;
}

.row{
    clear:both;
}

.element01 {
    width: 100%;
}

.element02 {
    color: #00f;
    background-color: #ddd;
}

.element03 {
    color: #00f;
}

.element04 {
    background-color: #ddd;
}

.element05 {
    border: 2px dotted #00f;
}

.element06 {
    border: none;
}

.element07 {
    font-family: "Courier New", Courier;
}

.element08 {
    font-size: 2em;
}

.element09 {
    font-size: 0.5em;
}

.element10 {
    font-weight: bold;
}

.element11 {
    padding: 1em;
}

.element12 {
    margin: 1em;
}

.element13 {
    text-align: right;
}

.element14 {
}

.element15 {
    line-height: 3em;
}

.element16 {
    height:3em;
    line-height: 3em;
}

.element17 {
    border-radius: 2em;
}

.element18 {
}

select{
    width:50%;
    height:34px;
}</style></head><body><div class="container"><div class="row"><div class="col-lg-1"><button data="label" class="btn selectEle">Label</button></div><div class="col-lg-1"><button data="input" class="btn selectEle">Input</button></div><div class="col-lg-1"><button data="button" class="btn selectEle">Button</button></div><div class="col-lg-1"><button data="checkbox" class="btn selectEle">Checkbox</button></div><div class="col-lg-1"><button data="radio" class="btn selectEle">Radio</button></div><div class="col-lg-1"><button data="select" class="btn selectEle">Select</button></div></div><div class="row"><form class="center"><h2>Input几种样式集合。默认width：300px</h2><h3>当前浏览器:</h3><input value="element01 : width:100%;" class="element01"><br><input value="element02 : color:blue;background-color: #ddd;" class="element02"><br><input value="element03 : color:#00f;" class="element03"><br><input value="element04 : background-color: #ddd;" class="element04"><br><input value="element05 : border: 2px dotted #00f;" class="element05"><br><input value="element06 : border: none;" class="element06"><br><input value="element07 : font-family: &quot;Courier New&quot;, Courier;" class="element07"><br><input value="element08 : font-size: 2em;" class="element08"><br><input value="element09 : font-size: 0.5em;" class="element09"><br><input value="element10 : font-weight: bold;" class="element10"><br><input value="element11 : padding: 1em;" class="element11"><br><input value="element12 : margin: 1em;" class="element12"><br><input value="element13 : text-align: right;" class="element13"><br><input value="element14 默认选中效果" class="element14"><br><input value="element15 line-height: 3em;" class="element15"><br><input value="element15 height:3em;line-height: 3em;" class="element16"><br><input value="element17 border-radio:2em;" class="element17"><br><input placeholder="element17 placeholder" class="element18"></form></div><div class="row"><br><br><br><div class="col-lg-6"><div class="dropdown-left"><select><option value="chrome40">chrome 40</option><option value="firefox36">firefox 36</option><option value="opera28">opera 28</option><option value="ie7">ie 7</option><option value="ie8">ie 8</option><option value="ie9">ie 9</option><option value="ie10">ie 10</option><option value="ie11">ie 11</option></select><div class="content"><p>chrome 40:</p><img src="img/input/chrome40.png"></div></div></div><div class="col-lg-6 center"><div class="dropdown-right"><select><option value="chrome40">chrome 40</option><option value="firefox36">firefox 36</option><option value="opera28">opera 28</option><option value="ie7">ie 7</option><option value="ie8">ie 8</option><option value="ie9">ie 9</option><option value="ie10">ie 10</option><option value="ie11">ie 11</option></select><div class="content"><p>chrome 40:</p><img src="img/input/chrome40.png"></div></div></div></div></div><script src="../bower_components/jquery/dist/jquery.js"></script><script>$('select').on('change', function(){
    var name = $(this).find("option:selected").val();
    var $content = $('.content', $(this).parent())
    $('p', $content).html(name);
    $('img', $content).attr('src', 'img/input/'+name+'.png');
})

$('.selectEle').on('click', function () {
    var name = $(this).attr('data');
    location.href = location.href.substring(0, location.href.lastIndexOf("/") + 1) + name + ".html";
})</script></body>